<template>
  <div class="page-container">
    <div class="table-title">
      <h2>全公司项目碱度用量统计分析表</h2>
    </div>
    <div class="separator"></div>
    <div class="date-selector">
      <el-date-picker
        v-model="form.dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        @change="validateDateRange"
      ></el-date-picker>
      <el-button type="primary" @click="fetchData" class="fetch-button">查看</el-button>
      <span v-if="form.dateRange.length !== 2" class="date-hint">
        <i class="el-icon-warning-outline"></i> 请选择日期范围
      </span>
    </div>
    <div class="separator"></div>
    <div class="table-container">
      <el-table
        :data="paginatedTableData"
        style="width: 100%"
        border
        stripe
        @sort-change="handleSortChange"
      >
        <el-table-column label="序号" width="50" align="center" sortable :formatter="indexFormatter"></el-table-column>
        <el-table-column prop="projectName" label="项目名称" sortable></el-table-column>
        <el-table-column prop="waterTreatmentVolume" label="处理水量" sortable></el-table-column>
        <el-table-column prop="ammoniaNitrogen" label="蒸氨废水氨氮 mg/L" sortable></el-table-column>
        <el-table-column prop="thiocyanateRoot" label="蒸氨废水硫氰酸根 mg/L" sortable></el-table-column>
        <el-table-column prop="totalNitrogen" label="蒸氨废水总氮 mg/L" sortable></el-table-column>
        <el-table-column prop="compositeAlkaliConcentration" label="复合碱投加浓度 mg/L" sortable></el-table-column>
        <el-table-column prop="sodiumHydroxideConcentration" label="液碱投加浓度 mg/L" sortable></el-table-column>
        <el-table-column prop="sodiumCarbonateConcentration" label="纯碱投加浓度 mg/L" sortable></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="tableData.length"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { fetchData } from '@/api/count/statisticalAnalysisAlkalinityDosage'; // 引入API文件

export default {
  name: 'DataTableComponent',
  data() {
    return {
      form: {
        dateRange: ['', ''], // 初始化为一个数组，包含开始日期和结束日期
      },
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      sortConfig: {
        prop: null,
        order: null,
      },
    };
  },
  computed: {
    paginatedTableData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      let sortedData = [...this.tableData];
      if (this.sortConfig.prop) {
        sortedData = sortedData.sort((a, b) => {
          if (this.sortConfig.order === 'ascending') {
            return a[this.sortConfig.prop] > b[this.sortConfig.prop] ? 1 : -1;
          } else {
            return a[this.sortConfig.prop] < b[this.sortConfig.prop] ? 1 : -1;
          }
        });
      }
      return sortedData.slice(start, end);
    },
  },
  methods: {
    indexFormatter(row, column, cellValue, index) {
      return (this.currentPage - 1) * this.pageSize + index + 1;
    },
    async fetchData() {
      if (this.form.dateRange.length !== 2) {
        this.$message.error('请选择完整的日期范围');
        return;
      }
      try {
        const data = await fetchData(this.form.dateRange[0], this.form.dateRange[1]);
        this.tableData = data;
        this.currentPage = 1; // 每次查询后重置到第一页
      } catch (error) {
        this.$message.error('获取数据失败，请重试');
      }
    },
    handlePageChange(page) {
      this.currentPage = page;
    },
    handleSortChange({ prop, order }) {
      this.sortConfig = { prop, order };
    },
    validateDateRange() {
      // 简单验证是否选择了两个日期
      if (this.form.dateRange.length !== 2) {
        this.$message.error('请选择完整的日期范围');
        this.form.dateRange = [];
      }
    },
  },
};
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #f0f8ff; /* 更改背景颜色 */
  height: 100vh;
}

.table-title h2 {
  margin-bottom: 20px;
  color: #333;
  text-align: center;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

.separator {
  width: 80%;
  max-width: 1200px;
  height: 1px;
  background-color: #ddd;
  margin: 20px 0;
}

.date-selector {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.date-hint {
  margin-left: 10px;
  color: #ff4d4f;
}

.fetch-button {
  margin-left: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table-container {
  width: 80%;
  max-width: 1200px;
  margin-bottom: 20px;
}

.el-table {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
}

.el-table th, .el-table td {
  font-family: Arial, sans-serif;
  color: #555;
  padding: 12px; /* 增加单元格内边距 */
}

.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
